<template>
    <div class="p-2 py-4 flex flex-col gap-3">
        <!--折叠面板-->
        <el-collapse v-model="activeNames" accordion>
            <el-collapse-item name="0" :title="t('aigcApp.baseSetting')">
                <div class="flex items-center">
                    <div class="w-24">
                        {{ t('aigcApp.chatModel') }}:
                    </div>
                    <model-select :id="appStore.modelId"  class="w-auto" style="width:180px" @update="onSaveModel"/>
                </div>
            </el-collapse-item>
            <el-collapse-item name="1" :title="t('aigcApp.knowledgeBase')">
                <template #header-extra>
                    <el-button type="text" @click.stop="onShowKbPane">
                        <SvgIcon :name="'ic:round-plus'" :iconify="true"/>
                    </el-button>
                </template>
                <div v-if="appStore.knowledges">
                    <el-table :data="appStore.knowledges" class="w-full">
                        <el-table-column prop="name" :label="t('aigcApp.knowledgeName')">
                            <template #default="{row}">
                                <div class="flex items-center gap-2">
                                    <SvgIcon class="text-3xl" :name="'flat-color-icons:document'" :iconify="true" />
                                    <span>{{ row.name }}</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column width="80" :label="t('common.action')">
                              <template #default="{row}">
                                <el-button type="danger" circle icon="el-icon-delete" @click="onRemove(row)"></el-button>
                              </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div v-else class="text-gray-400"> 
                        {{ t('aigcApp.settingsInfo') }}
                </div>
            </el-collapse-item>
        </el-collapse>
        <!--知识库-->
        <knowledge-list ref="knowledgeRef"/>
    </div>
</template>
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { useAppStore } from '/@/stores/aigc/appStore';
const ModelSelect=defineAsyncComponent(()=>import('/@/views/aigc/model/modelSelect.vue'));
const KnowledgeList=defineAsyncComponent(()=>import('./knowledgeList.vue'));
const {t}=useI18n();
const knowledgeRef=ref();
const appStore=useAppStore();
const emit=defineEmits(['update']);
const activeNames=ref();

async function onSaveModel(val) {
    appStore.modelId=val.id;
    emit('update');
}
function onShowKbPane(){
    knowledgeRef.value.show();
}
function onRemove(item:any){
    appStore.removeKnowledge(item);
}
</script>

<style lang="css" scoped>
    /* 修改箭头位置 */
    .el-collapse-item__header {
        justify-content: flex-start; /* 将内容对齐到起始位置 */
    }
    .el-collapse-item__arrow {
        margin-right: auto; /* 将箭头推到最左侧 */
    }
</style>